<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记事本</title>
    <script src="./js/vue.js"></script>
    <style>
        #app {
            width: 800px;
            height: 400px;
            margin: 10px auto;
            display: flex;
        }

        #scoreList {
            width: 500px;
            height: 400px;
            position: relative;
            border: 2px solid #333333;
        }

        #scoreAdd {
            width: 300px;
            height: 400px;
            border: 0;
            padding-left: 30px;
        }

        #scoreList div:last-child {
            position: absolute;
            bottom: 0;
            background-color: #dddddd;
            width: 100%;
            height: 50px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }

        #scoreList table {
            border-top: 0;
            border-left: 0;
            border-right: 0;
            width: 100%;
            border-collapse: collapse;
        }

        #scoreList table th {
            font-weight: bold;
            text-align: center;
            border: 1px solid #333333;
            padding: 8px;
        }

        #scoreList table td {
            text-align: center;
            border: 1px solid #333333;
            padding: 8px;
        }

        .noArrText {
            color: slategrey;
            text-align: center;
            position: absolute;
            top: 100px;
            left: 200px;
        }

        .textRed {
            color: red;
        }

        #scoreAdd input {
            height: 30px;
            padding-left: 10px;
            border: 1px solid slategrey;
            border-radius: 5px;
        }

        #scoreAdd button {
            background-color: cornflowerblue;
            color: whitesmoke;
            border: 0;
            width: 50px;
            height: 30px;
            border-radius: 5px;
            margin-left: 40px;
        }

        #tbDiv {
            overflow-y: auto;
            height: 350px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--成绩列表-->
    <div id="scoreList">
        <div>
            <div id="tbDiv">
                <table>
                    <tr>
                        <td><strong>编号</strong></td>
                        <td><strong>科目</strong></td>
                        <td><strong>成绩</strong></td>
                        <td><strong>操作</strong></td>
                    </tr>
                    <tr v-for="(a,index) in arr" :key="index">
                        <td>{{index + 1}}</td>
                        <td>{{a.subject}}</td>
                        <td :class="{textRed:a.score<60}">{{a.score}}</td>
                        <td><a href="#" @click.prevent="del(index)">删除</a></td>
                    </tr>
                </table>
            </div>
            <p class="noArrText" v-show="arr.length == 0">
                <strong>暂无数据</strong>
            </p>
        </div>
        <div>
            <span>总分: {{allScore}}</span>
            <span style="padding-left: 50px">平均分: {{averageScore}}</span>
        </div>
    </div>
    <!--添加成绩-->
    <div id="scoreAdd">
        <p><strong>科目: </strong><input type="text" placeholder="请输入科目" v-model="subject"></p>
        <p><strong>分数: </strong><input type="text" placeholder="0" v-model="score"></p>
        <p>
            <button @click="addArr">添加</button>
        </p>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: [],
            subject: '', // 输入的科目
            score: '' // 输入的成绩
        },
        methods: {
            del(index) {
                this.arr.splice(index, 1);
            },
            addArr() {
                if (this.subject && this.score && this.score <= 100 && this.score >= 0) {
                    this.arr.push({
                        subject: this.subject,
                        score: this.score
                    });
                    this.subject = '';
                    this.score = '';
                } else {
                    alert("请填写数据！")
                }
            }
        },
        computed: {
            allScore() {
                let allScore = 0;
                for (let i = 0; i < this.arr.length; i++) {
                    allScore += Number(this.arr[i].score);
                }
                return allScore
            },
            averageScore() {
                if (this.arr.length > 0) {
                    return (this.allScore / this.arr.length).toFixed(1)
                }
                return 0
            }
        }
    })
</script>